<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        header{
            background-color: purple;
            height: 100px;
        }
        h1{
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }
        article{
            padding: 10px;
            margin: 10px;
            background-color: pink;
        }
        h2, p{
            color: whitesmoke;
        }
        /*
        排列顺序
        语法: flex-direction: row | row-reverse | column | column-reverse
        flex-direction:row：横向从左到右排列（左对齐），默认的排列方式。
                       row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
                       column：纵向排列。
                       column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
         */
        section{
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>

<header>
    <h1>Sample flex box </h1>
</header>
<section>
    <article>
        <h2> first article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> second article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> third article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> four article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> five article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> six article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> seven article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> eight article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> nine article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> ten article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> eleven article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
    <article>
        <h2> twelve article</h2>
        <p>
            this is world in the new this is world in the new this is world in the new this is world in the new
        </p >
    </article>
</section>
</body>
</html>